<template>
    <div class="list">
        
        <el-row>
            <el-col :span="12" :offset="18">
                <el-button type="primary" icon="plus" @click="onAddAdmin">添加管理员</el-button>
            </el-col>
        </el-row>
        <div class="divline"></div>

        <el-table :data="tableData" border style="width: 100%" align='center'>
            <el-table-column 
                :prop="fields.username.info.prop"
                :label="fields.username.info.label"
                :align="fields.username.style.align"
                :width="fields.username.style.width"
                :sortable="fields.username.info.sortable">
            </el-table-column>
            <el-table-column 
                :prop="fields.realname.info.prop"
                :label="fields.realname.info.label"
                :align="fields.realname.style.align"
                :width="fields.realname.style.width"
                :sortable="fields.realname.info.sortable">
            </el-table-column>
            <el-table-column
                :prop="fields.level.info.prop"
                :sortable="fields.level.info.sortable"
                :label="fields.level.info.label"
                :align="fields.level.style.align"
                :width="fields.level.style.width"
                :formatter="formatterLevel"
                :filters="fields.level.filter.list"
                :filter-method="filterLevel"
                :filter-multiple="fields.level.filter.multiple">
            </el-table-column>
            <el-table-column
                :prop="fields.status.info.prop"
                :sortable="fields.status.info.sortable"
                :label="fields.status.info.label"
                :align="fields.status.style.align"
                :width="fields.status.style.width"
                :formatter="formatterStatus"
                :filters="fields.status.filter.list"
                :filter-method="filterStatus"
                :filter-multiple="fields.status.filter.multiple">
            </el-table-column>
            <el-table-column
                :prop="fields.create_time.info.prop"
                :sortable="fields.create_time.info.sortable"
                :label="fields.create_time.info.label"
                :align="fields.create_time.style.align"
                :width="fields.create_time.style.width"
                :formatter="formatterCreateTime">
            </el-table-column>
           
            <el-table-column 
                :prop="fields.remark.info.prop"
                :label="fields.remark.info.label"
                :align="fields.remark.style.align"
                :width="fields.remark.style.width">
            </el-table-column>

             <el-table-column 
                v-if="checkLevel()"
                :label="fields.action.info.label"
                :align="fields.action.style.align"
                :width="fields.action.style.width">
                <template scope='scope' >
                    <el-checkbox :disabled='checkSelf(scope.row)' v-model="scope.row.statusChecked" @change='onStatusCheckedChange((scope.row))'>启用</el-checkbox> 
                    <el-checkbox :disabled='checkSelf(scope.row)' style="margin-left:10px" v-model="scope.row.levelChecked" @change='onLevelCheckedChange((scope.row))'>管理员权限</el-checkbox> 
                    <el-tooltip style="margin-left:10px" content="删除" placement="right">
                        <el-button :disabled='checkSelf(scope.row)' type="danger"   icon='delete'   size="mini" @click='onDeleteAdmin(scope.row,scope.$index)'></el-button>
                    </el-tooltip>
                </template>
            </el-table-column> 
        </el-table>

<!-- 添加管理员 -->
        <el-dialog title="添加管理员" v-model="addFormVisible">
            <el-form :model="adminForm" :rules="rules" ref="adminForm" style="width: 80%" label-width="30%">
               <el-form-item prop="username" label="用户名">
                    <el-input 
                        placeholder="请输入用户名"
                        v-model="adminForm.username">
                    </el-input>
                </el-form-item>
                <el-form-item prop="password" label="密码">
                    <el-input 
                        type="password"
                        placeholder="请输入密码"
                        v-model="adminForm.password">
                    </el-input>
                </el-form-item>
                <el-form-item  
                    prop="password2" 
                    label="确认密码">
                    <el-input                
                        type="password" 
                        placeholder="请再次输入密码"
                        v-model="adminForm.password2">
                    </el-input>
                </el-form-item>
                <el-form-item prop="realname" label="姓名">
                    <el-input 
                        placeholder="请输入姓名"
                        v-model="adminForm.realname">
                    </el-input>
                </el-form-item>
                 <el-form-item prop="remark" label="管理员备注"
                    :rules="[{required: false}]">
                    <el-input 
                        placeholder="请输入备注"
                        v-model="adminForm.remark" 
                        type="textarea" :rows="1">
                    </el-input>
                </el-form-item>
                <el-form-item label="">
                    <el-checkbox-group v-model="adminForm.config">
                        <el-checkbox label="启用" name="config"></el-checkbox>
                        <el-checkbox label="管理员权限" name="config"></el-checkbox>
                    </el-checkbox-group>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="submitForm('adminForm')">提交</el-button>
                <el-button type="primary" @click="resetForm">重置</el-button>
                <el-button @click="addFormVisible = false">取消</el-button>
            </div>
        </el-dialog>

    </div>
</template>

<script>
    import ListJs from './List.js';
    module.exports=ListJs;
</script>
<style scoped>
     .divline {
    margin-top: 10px;
    margin-bottom: 20px;
    height:1px;
    width:100%;
    background:#999;
    overflow:hidden;
  }   
</style>
